import React from 'react';
import { View, ScrollView } from 'react-native';
import { Lt, Color, Nav, Label, Button, Jpp, Jx, Flist, Dialog, Touch, Rlist } from "../_utils";
import { Net, NET_NR } from "../_net"
import { Projector } from '../_teaset';
import { GoodsHor } from './ApplyGoods';
import { eApp } from '../home/_home';
import { FlistHeadLine, ViewLine } from '../_util';

class ViewSelect extends React.PureComponent{
    render(){
        const {select} = this.props;
        const style = {
            width:20, 
            height:20, 
            borderRadius:10, 
            borderWidth:2,
            backgroundColor:"white", 
            alignSelf:"center", 
            justifyContent:"center",
            alignItems:"center",
            marginLeft:Lt.margin,
        }
        if(select){
            return <View style={{...style, borderColor:Color.theme}}>
                <View style={{width:10, height:10, borderRadius:5, backgroundColor:Color.theme}}/>
            </View>
        }
        return <View style={{...style, borderColor:"#CCCCCC"}}/>
    }
}

const c_wh = 125;
function toData(item){
    return {
        imgUrl:item.image,
        appIdx:eApp.rdxs[item.src],
        istmall:(item.src === eApp.TM),
        goodName:item.title,
        price: item.price,
        volume:item.volume, // 月销量
        zk_price:item.coupon_price, // 折后券
        zk_money:item.coupon, // 优惠券
        agent:item.agent, // 推广赚
        hasCoupon : item.coupon,
    };
}
// 不用Pure
class FavoriteEdit extends React.Component{
    constructor(props){
        super(props);
        
        const dataArray = [];
        this.state = {
            dataArray,
            selectIdxs: dataArray.map(v=>false),
        }
        this.onAll = this.onAll.bind(this);
        this.onDelete = this.onDelete.bind(this);

    }
    static navigationOptions = {
        header:null
    }
    init(dataArray){
        this.setState({
            dataArray,
            selectIdxs:dataArray.map(v=>false),
        });
    }
    isAll(){
        return this.state.selectIdxs.indexOf(false)<0;
    }
    isNone(){
        return this.state.selectIdxs.indexOf(true)<0;
    }
    setAll(){
        const {dataArray} = this.state;
        this.setState({
            selectIdxs:dataArray.map(v=>true),
        })
    }
    setNone(){
        const {dataArray} = this.state;
        this.setState({
            selectIdxs:dataArray.map(v=>false),
        })
    }
    onSelect(idx){
        let { selectIdxs } = this.state;
        selectIdxs[idx] = !selectIdxs[idx];
        this.setState(selectIdxs);
    }
    onAll(){
        if(this.isAll()){
            this.setNone();
        }else{
            this.setAll();
        }
    }
    onDelete(){
        if(this.isNone()){
            Dialog.msg1("未选中");
            return;
        }
        const { onEdited } = this.props;
        const { dataArray, selectIdxs } = this.state;
        let selects = [];
        for(let k = selectIdxs.length - 1; k >= 0; --k){
            if(selectIdxs[k]){
                selects.push(dataArray[k])
            }
        }
        onEdited && onEdited(selects);
    }
    render(){
        const { dataArray }=this.state;
        return <View style={{flex:1}}>
            <Rlist>
            {
                dataArray.map((v,i)=>{
                    return <Touch key={i} onPress={this.onSelect.bind(this,i)}>
                        <View style={{flexDirection:"row"}}>
                            <ViewSelect select={this.state.selectIdxs[i]}/>
                            <GoodsHor
                                style = {{flex:1, margin:Lt.margin}} 
                                wh={ c_wh }
                                data={toData(v)}
                            />
                        </View>
                    </Touch> 
                })
            }
            </Rlist>
            <View style={{flexDirection:"row", justifyContent:"space-between", alignItems:"center", backgroundColor:Color.back}}>
                <Touch onPress={this.onAll}>
                    <View style={{flexDirection:"row", alignItems:"center"}}>
                        <ViewSelect select={this.isAll()}/>
                        <Label style={{padding:Lt.pad, fontSize:Lt.c16, color:Color.c3}}>全选</Label>
                    </View>
                </Touch>
                <Button.Pure1 title={"删除"} onPress={this.onDelete} style={{fontSize:Lt.c16, width:120, borderRadius:0}}/>
            </View>
        </View>
    }    
}


export class ApplyFavorite extends React.PureComponent{
    constructor(props){
        super(props);

        this.state = {
            isEdit:false,
        }
        this.dataArray = [];
        this.flist = null;
        this.edit = null;
        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
        this.onShow = this.onShow.bind(this);
        this.onEdit= this.onEdit.bind(this);
        this.onEdited= this.onEdited.bind(this);
    }
    static navigationOptions = {
        header:null
    }
    onLoad(params){
        Net.request("collect/my", params.pagination, {params}).then(r=>{
            if(r.data){
                params.add(r.data.list);
            }else{
                params.add()
            }
        });
    }
    onItem(params){
        const item = params.item;
        return <GoodsHor
            style = {{margin:Lt.margin}} 
            wh = { c_wh }
            data={toData(item)}
        />
    }
    onEdit(){
        if(this.state.isEdit){
            this.setState({
                isEdit:false,
            });
        }else if(this.dataArray.length > 0){
            this.setState({
                isEdit:true,
            });
            this.edit && this.edit.init(this.dataArray);
        }
    }
    onEdited(selects){
        Promise.all(selects.map(v=>{return Net.request("collect/"+v.id, null, {NET_NR})})).then(rs=>{
            Dialog.toast("删除完成");
            this.flist && this.flist.refresh(true);
            this.onEdit();
        });
    }
    onShow(arr){
        this.dataArray = arr;
        this.edit && this.edit.init(arr);
    }
    render(){
        return <View style = {{flex:1, backgroundColor:"white"}}>
            <Nav.StateBar/>
            <View style={{...Nav.style, justifyContent:"space-between"}}>
                <View style={{position:"absolute", flex:1, width:Jpp.width, flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
                    <Nav.TouchTitle title={"我的收藏"}/>
                </View>
                <Nav.TouchBack/>
                <Nav.Touch
                    title = {this.state.isEdit ? "完成" : "管理"}
                    onPress = {this.onEdit}
                />
            </View>
            <Projector style={{flex:1, paddingTop:5}} index={this.state.isEdit ? 1 : 0}>
                <Flist
                    ref={r=>this.flist=r}
                    style={{flex:1}}
                    onLoad = {this.onLoad}
                    onItem = {this.onItem}
                    onShow = {this.onShow}
                    ListHeaderComponent = {<FlistHeadLine/>}
                    ItemSeparatorComponent = {ViewLine}
                    stickyHeaderIndices = {[0]}
                    maxpp={10}
                />
                <FavoriteEdit
                    onEdited={this.onEdited}
                    // 注意有一来一回 null
                    ref={r=>{this.edit=r; r && r.init(this.dataArray)}}
                />
            </Projector>
        </View>
    }
}